<template>
  <div class="examine-content-container">
    <Promised :promise="getTaskDetailsAsync">
      <template v-slot:pending>
        <Skeleton
          :rows="8"
        />
      </template>
      <template v-slot>
        <section>
          <!-- <ApprovalCard @update="updateLoan" :loan-details="loanDetails" /> -->

          <LoanUser class="card" :loan-details="loanDetails" />

          <Repayments class="card" :loan-details="loanDetails" />

          <LoanDetails :loan-details="loanDetails" />

          <!-- <Risk :loan-details="loanDetails" /> -->
        </section>
      </template>
    </Promised>
  </div>
</template>

<script>
import { getTaskDetails } from '@/api/flow/work'
import ApprovalCard from '@/views/credit/repayment/details/content/form'
import LoanDetails from '@/views/credit/repayment/details/content/loan/Details'
import LoanUser from '@/views/credit/repayment/details/content/loan/User'
import Repayments from '@/views/credit/repayment/details/content/repayment'

export default {
  data () {
    return {
      loanDetails: {},

      getTaskDetailsAsync: null,
    }
  },

  computed: {
    tid () {
      return this.$route.params.tid
    },
  },

  components: {
    ApprovalCard,
    Repayments,
    LoanDetails,
    LoanUser,
    // Risk,
  },

  created () {
    this.getTaskDetailsAsync = this.getTaskDetails()
  },

  methods: {
    updateLoan () {
      this.getTaskDetailsAsync = this.getTaskDetails()
    },

    getTaskDetails () {
      return new Promise((resovle, reject) => {
        getTaskDetails(this.tid)
          .then(data => {
            this.loanDetails = data
            resovle(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.card{
  margin-top: 24px;
}
</style>
